<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Filter } from '@element-plus/icons-vue'

// 退款列表列数据
const columns = [
    { title: '退款编号', key: 'refundNo', sortable: true },
    { title: '客户简称', key: 'customerShortName', sortable: true },
    { title: '退款金额', key: 'refundAmount', sortable: true },
    { title: '合同订单编号', key: 'contractNo' },
    { title: '退款状态', key: 'refundStatus' },
    { title: '退款方式', key: 'refundMethod' },
    { title: '退款账号', key: 'refundAccount' },
    { title: '退款时间', key: 'refundTime', sortable: true },
];

const mockData = ref([]);
const loading = ref(true);
const activeName = ref('all'); // 默认选中"全部"

// 筛选表单数据
const form = ref({
    refundNo: '',
    customerName: '',
    startTime: '',
    endTime: '',
    refundStatus: '',
    refundMethod: ''
});

// 处理标签页切换事件
const handleTabChange = (tabKey) => {
    loading.value = true;
    activeName.value = tabKey;

    setTimeout(() => {
        // 根据不同标签页加载对应数据
        switch (tabKey) {
            case 'all':
                // 全部退款数据
                mockData.value = [
                    {
                        refundNo: 'REF2023001',
                        customerShortName: '阿里科技',
                        refundAmount: 5000,
                        contractNo: 'ORD2023001',
                        refundStatus: '已完成',
                        refundMethod: '退给客户',
                        refundAccount: '6222****1234',
                        refundTime: '2023-10-01 14:30:00'
                    },
                    {
                        refundNo: 'REF2023002',
                        customerShortName: '腾讯科技',
                        refundAmount: 2500,
                        contractNo: 'ORD2023002',
                        refundStatus: '待确认退款',
                        refundMethod: '退给客户',
                        refundAccount: '6222****5678',
                        refundTime: '2023-10-05 09:15:00'
                    }
                ];
                break;
            case 'toSubmit':
                // 待提交/审核不通过
                mockData.value = [];
                break;
            case 'toConfirm':
                // 待确认退款
                mockData.value = [
                    {
                        refundNo: 'REF2023002',
                        customerShortName: '腾讯科技',
                        refundAmount: 2500,
                        contractNo: 'ORD2023002',
                        refundStatus: '待确认退款',
                        refundMethod: '退给客户',
                        refundAccount: '6222****5678',
                        refundTime: '2023-10-05 09:15:00'
                    }
                ];
                break;
            case 'completed':
                // 退款已完成
                mockData.value = [
                    {
                        refundNo: 'REF2023001',
                        customerShortName: '阿里科技',
                        refundAmount: 5000,
                        contractNo: 'ORD2023001',
                        refundStatus: '已完成',
                        refundMethod: '退给客户',
                        refundAccount: '6222****1234',
                        refundTime: '2023-10-01 14:30:00'
                    }
                ];
                break;
            case 'relatedDocs':
                // 待处理相关业务单据
                mockData.value = [];
                break;
        }
        loading.value = false;
    }, 800);
};

// 筛选表单提交
const handleFilterSubmit = () => {
    loading.value = true;
    // 模拟筛选逻辑
    setTimeout(() => {
        // 先获取当前标签页的所有数据
        let filteredData = [...mockData.value];

        // 应用筛选条件
        if (form.value.refundNo) {
            filteredData = filteredData.filter(item =>
                item.refundNo.includes(form.value.refundNo)
            );
        }
        if (form.value.customerName) {
            filteredData = filteredData.filter(item =>
                item.customerShortName.includes(form.value.customerName)
            );
        }
        if (form.value.refundStatus) {
            filteredData = filteredData.filter(item =>
                item.refundStatus === form.value.refundStatus
            );
        }
        if (form.value.refundMethod) {
            filteredData = filteredData.filter(item =>
                item.refundMethod === form.value.refundMethod
            );
        }

        mockData.value = filteredData;
        loading.value = false;
    }, 500);
};

// 重置筛选表单
const resetFilterForm = () => {
    form.value = {
        refundNo: '',
        customerName: '',
        startTime: '',
        endTime: '',
        refundStatus: '',
        refundMethod: ''
    };
    // 重新加载当前标签页数据
    handleTabChange(activeName.value);
};

// 搜索功能
const handleSearch = () => {
    const keyword = form.value.refundNo || '';
    if (!keyword) {
        // 搜索为空时重新加载当前标签页数据
        handleTabChange(activeName.value);
        return;
    }

    loading.value = true;
    setTimeout(() => {
        const filtered = mockData.value.filter(item => {
            return item.refundNo.includes(keyword) ||
                item.customerShortName.includes(keyword);
        });
        mockData.value = filtered;
        loading.value = false;
    }, 500);
};

// 页面挂载时加载初始数据
onMounted(() => {
    handleTabChange('all');
});
</script>

<template>
    <div class="refund-management">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">筛选</div>
                            <div class="top-filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="top-filter-form">
                            <el-form :model="form" label-width="80px">
                                <!-- 退款时间范围 -->
                                <el-form-item label="退款时间:">
                                    <div class="date-range">
                                        <el-date-picker v-model="form.startTime" type="date" placeholder="请选择日期"
                                            style="width: 48%;" />
                                        <span style="width: 4%; text-align: center;">到</span>
                                        <el-date-picker v-model="form.endTime" type="date" placeholder="请选择日期"
                                            style="width: 48%;" />
                                    </div>
                                </el-form-item>

                                <!-- 退款状态 -->
                                <el-form-item label="退款状态:">
                                    <el-select v-model="form.refundStatus" placeholder="搜索退款状态">
                                        <el-option label="待提交" value="待提交"></el-option>
                                        <el-option label="审核不通过" value="审核不通过"></el-option>
                                        <el-option label="待确认退款" value="待确认退款"></el-option>
                                        <el-option label="退款已完成" value="退款已完成"></el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 退款方式 -->
                                <el-form-item label="退款方式:">
                                    <div class="refund-methods">
                                        <el-radio v-model="form.refundMethod" label="退给客户">退给客户</el-radio>
                                        <el-radio v-model="form.refundMethod" label="用于支付其他业务（转入认领池）">
                                            用于支付其他业务（转入认领池）
                                        </el-radio>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button type="text" @click="resetFilterForm">重置</el-button>
                            <el-button type="primary" @click="handleFilterSubmit">查询</el-button>
                        </div>
                    </template>
                </stick-popup>

                <div class="top-filter-search">
                    <el-input v-model="form.refundNo" placeholder="退款编号/客户名称" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>
        </div>

        <div class="table-area">
            <div class="table-area-tab">
                <div class="tab-wrapper">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="(tab) => handleTabChange(tab.name)"
                        stretch>
                        <el-tab-pane label="全部" name="all"></el-tab-pane>
                        <el-tab-pane label="待提交/审核不通过(0)" name="toSubmit"></el-tab-pane>
                        <el-tab-pane label="待确认退款(0)" name="toConfirm"></el-tab-pane>
                        <el-tab-pane label="退款已完成(0)" name="completed"></el-tab-pane>
                        <el-tab-pane label="待处理相关业务单据(0)" name="relatedDocs"></el-tab-pane>
                    </el-tabs>
                </div>
            </div>

            <div class="table-area-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true"
                    :show-operation="false">
                    <!-- 金额格式化 -->
                    <template #data-refundAmount="scope">
                        ¥{{ scope.data.refundAmount.toFixed(2) }}
                    </template>

                    <!-- 状态显示优化 -->
                    <template #data-refundStatus="scope">
                        <el-tag :type="scope.data.refundStatus === '已完成' ? 'success' :
                            scope.data.refundStatus === '待确认退款' ? 'warning' :
                                scope.data.refundStatus === '审核不通过' ? 'danger' : 'info'">
                            {{ scope.data.refundStatus }}
                        </el-tag>
                    </template>
                </my-table>

                <!-- 无数据状态显示 -->
                <div v-if="!loading && mockData.length === 0" class="no-data">
                    <div class="no-data-icon">
                        <img src="https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/036aa8eaada241edb7377e7b643a2186.png~tplv-a9rns2rl98-24-95-exif:960:960.png"
                            alt="暂无数据" />
                    </div>
                    <div class="no-data-text">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.refund-management {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    overflow: hidden;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .top-filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .top-filter-search {
            width: 300px;
        }
    }
}

.table-area {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .table-area-tab {
        margin-bottom: 16px;

        .tab-wrapper {
            width: 100%;

            .demo-tabs {
                width: 100%;
            }
        }
    }

    .table-area-table {
        width: 100%;
        min-height: 400px;
        position: relative;

        .no-data {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .no-data-icon {
                width: 120px;
                height: 120px;
                margin-bottom: 16px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .no-data-text {
                color: #909399;
                font-size: 14px;
            }
        }
    }
}

.top-filter-form {
    padding: 15px;
    width: 400px;

    .el-form-item {
        margin-bottom: 15px;
    }

    .date-range {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .refund-methods {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.top-filter-operate {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}

.filter-icon {
    margin-left: 5px;
    color: #c0c4cc;
    cursor: pointer;
    font-size: 16px;
}
</style>